<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/javascript" src="./vue.min.js"></script>
    <script type="text/javascript">

    // 需求：input输入框 获取焦点
    var App = {
        data: function() {
            return {
            	isShow : false
            }
        },
        template: `
				<div class='app'>
					<input type="text"  v-show = 'isShow' ref = 'input'/>
				</div>

			`,
        mounted: function() {
        	 this.isShow = true;
        	 console.log(this.$refs.input);

        	 // $nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOM
        	 this.$nextTick(function() {
        	 	// 更新之后的DOM
        	 	 this.$refs.input.focus();
        	 })
       
        }
    }
    new Vue({
        el: '#app',
        data: function() {
            return {

            }
        },
        template: `<App />`,
        components: {
            App
        }
    });
    </script>
</body>

</html>